<template>
    <Form ref="formRef" :formList="formList" :formData="formData" :rules="rules"></Form>
    <el-button type="primary" @click="submitForm">提交</el-button>
</template>
<script>
export default defineComponent({
    name: 'custon-form',
});
</script>
<script setup>
import Form from "@/components/Form/Form.vue"
import { checkEmpty } from "@/utils/check"

const formRef = ref()
// 表单配置项
const formList = [
    {
        label: "姓名",
        type: "input",
        key: "real_name",
    },
    {
        label: "性别",
        type: "radio-group",
        key: "sex",
        radioOptions: [
            {
                label: "男",
                value: "man"
            },
            {
                label: "女",
                value: "woman"
            },
        ]
    },
    {
        label: "爱好",
        type: "select",
        key: "hobby",
        selectOptions: [
            {
                label: "篮球",
                value: "basketball",
            },
            {
                label: "游泳",
                value: "swim",
            },
        ],
    },
    {
        label: "出生日期",
        type: "date-picker",
        key: "birthday",
    },
]
// 表单数据
const formData = ref({
    real_name: "",
    sex: "",
    hobby: "",
    birthday: "",
})
// 表单校验
const rules = {
    real_name: [
        { required: true, validator: checkEmpty('姓名不能为空'), trigger: 'blur' },
    ],
}
// 提交表单
const submitForm = async () => {
    let d = await formRef.value.checkForm()
    if (d) {
        console.log(formData.value)
    }
}

</script>
<style lang='scss' scoped>
</style>
